<template>
  <div class="lunbo">
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="pink">
        <van-swipe-item v-for="(v, index) in banner" :key="index">
          <img :src="v.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="right">
      <div class="miaosha">
        <p class="zi">限时秒杀</p>
        <div class="bottom">
          <div class="tu">
            <img
              src="https://pic.cdfgsanya.com/assets/upload/product/bd24acc2be52228edba5a5408bb2df6b_400x400.jpg"
              alt=""
            />
            <p>￥1166</p>
          </div>
          <div class="tu">
            <img
              src="https://pic.cdfgsanya.com/assets/upload/product/38fd8c2415a928b0aa443b0f79f58086_400x400.jpg"
              alt=""
            />
            <p>￥1166</p>
          </div>
        </div>
      </div>
      <div class="shangou">
        <div class="zi1">
          <p class="zi">超级闪购</p>
          <!-- <span>爆款5折起</span> -->
        </div>
        <div class="bottom">
          <div class="tu">
            <img
              src="https://pic.cdfgsanya.com/assets/upload/product/4271c90e933c406c2a63d9fb66899813_400x400.jpg"
              alt=""
            />
            <p>￥1166</p>
          </div>
          <div class="tu">
            <img
              src="https://pic.cdfgsanya.com/assets/upload/product/38fd8c2415a928b0aa443b0f79f58086_400x400.jpg"
              alt=""
            />
            <p>￥1166</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "../../../utils/service";
export default {
  name: "swiper",
  data() {
    return {
      banner: [],
    };
  },
  mounted() {
    service({
      url: "banner",
      method: "get",
    }).then((res) => {
      console.log(res.data);
      this.banner = res.data;
    });
  },
};
</script>

<style scoped>
.lunbo {
  height: 187px;
  display: flex;
  justify-content: space-around;
  
}
.swiper {
  width: 45%;
  height: 187px;
  /* background-color: antiquewhite; */
  border-radius: 12px;
}
.swiper img {
  width: 100%;
  height: 187px;
  border-radius: 12px;
}
.right {
  width: 45%;
  height: 187px;
  /* padding: 5px 10px 0 0; */
  /* background-color: aqua; */
  box-sizing: border-box;
  font-size: 10px;
}
.miaosha,
.shangou {
  width: 100%;
  height: 92px;
  margin-bottom: 3px;
  /* background-color: aliceblue; */
  border-radius: 12px;
  background-color: white;
  text-align: center;
}
.right .zi {
  line-height: 20px;
  background-image: linear-gradient(hsla(350, 86%, 86%, 0.692),white);
  border-radius: 10px 10px 0 0;
  /* font-weight: 600; */
  padding-left: 5px;
}
.bottom {
  width: 100%;
  height: 70px;
  /* background-color: blueviolet; */
  float: left;
}
.right .tu {
  width: 50%;
  float: left;
}
.right .tu img {
  /* width:100%; */
  height: 55px;
}
.z1{
    float: left;
}
</style>